﻿<div>
    <MRow Justify="JustifyTypes.Center">
        <MButton Color="primary"
                 Class="ma-2"
                 OnClick="() => dialog = true">
            Open Dialog 1
        </MButton>
        <MButton Color="primary"
                 Class="ma-2"
                 OnClick="() => dialog2 = true">
            Open Dialog 2
        </MButton>
        <MButton Color="primary"
                 Class="ma-2"
                 OnClick="() => dialog3 = true">
            Open Dialog 3
        </MButton>


        <MMenu Bottom
               OffsetY>
            <ActivatorContent>
                <MButton Class="ma-2" @attributes="@context.Attrs">
                    A Menu
                </MButton>
            </ActivatorContent>
            <ChildContent>
                <MList>
                    @foreach (var item in items)
                    {
                        <MListItem OnClick="() => { }">
                            <MListItemTitle>@item</MListItemTitle>
                        </MListItem>
                    }
                </MList>
            </ChildContent>
        </MMenu>
        <MDialog @bind-Value="dialog"
                 Fullscreen
                 Transition="dialog-bottom-transition"
                 Scrollable>
            <MCard Tile>
                <MToolbar Flat
                          Color="primary">
                    <MButton Icon
                             OnClick="() => dialog = false">
                        <MIcon>mdi-close</MIcon>
                    </MButton>
                    <MToolbarTitle>Settings</MToolbarTitle>
                    <MSpacer></MSpacer>
                    <MToolbarItems>
                        <MButton text
                                 OnClick="() => dialog = false">
                            Save
                        </MButton>
                    </MToolbarItems>
                    <MMenu Bottom
                           OffsetY
                           Right>
                        <ActivatorContent>
                            <MButton Icon @attributes="@context.Attrs">
                                <MIcon>mdi-dots-vertical</MIcon>
                            </MButton>
                        </ActivatorContent>
                        <ChildContent>
                            <MList>
                                @foreach (var item in items)
                                {
                                    <MListItem OnClick="() => { }">
                                        <MListItemTitle>@item</MListItemTitle>
                                    </MListItem>
                                }
                            </MList>
                        </ChildContent>
                    </MMenu>
                </MToolbar>
                <MCardText>
                    <MButton Color="primary"
                             Class="ma-2"
                             OnClick="() => dialog2 = !dialog2">
                        Open Dialog 2
                    </MButton>
                    <MTooltip Right>
                        <ActivatorContent>
                            <MButton Class="ma-2" @attributes="@context.Attrs">
                                Tool Tip Activator
                            </MButton>
                        </ActivatorContent>
                        <ChildContent>
                            <span>Tool Tip</span>
                        </ChildContent>
                    </MTooltip>
                    <MList ThreeLine
                           Subheader>
                        <MSubheader>User Controls</MSubheader>
                        <MListItem>
                            <MListItemContent>
                                <MListItemTitle>Content filtering</MListItemTitle>
                                <MListItemSubtitle>Set the content filtering level to restrict apps that can be
                                    downloaded
                                </MListItemSubtitle>
                            </MListItemContent>
                        </MListItem>
                        <MListItem>
                            <MListItemContent>
                                <MListItemTitle>Password</MListItemTitle>
                                <MListItemSubtitle>Require password for purchase or use password to restrict purchase
                                </MListItemSubtitle>
                            </MListItemContent>
                        </MListItem>
                    </MList>
                    <MDivider></MDivider>
                    <MList ThreeLine
                           Subheader>
                        <MSubheader>General</MSubheader>
                        <MListItem>
                            <MListItemAction>
                                <MCheckbox @bind-Value="notifications"></MCheckbox>
                            </MListItemAction>
                            <MListItemContent>
                                <MListItemTitle>Notifications</MListItemTitle>
                                <MListItemSubtitle>Notify me about updates to apps or games that I downloaded
                                </MListItemSubtitle>
                            </MListItemContent>
                        </MListItem>
                        <MListItem>
                            <MListItemAction>
                                <MCheckbox @bind-Value="sound"></MCheckbox>
                            </MListItemAction>
                            <MListItemContent>
                                <MListItemTitle>Sound</MListItemTitle>
                                <MListItemSubtitle>Auto-update apps at any time. Data charges may apply
                                </MListItemSubtitle>
                            </MListItemContent>
                        </MListItem>
                        <MListItem>
                            <MListItemAction>
                                <MCheckbox @bind-Value="widgets"></MCheckbox>
                            </MListItemAction>
                            <MListItemContent>
                                <MListItemTitle>Auto-add widgets</MListItemTitle>
                                <MListItemSubtitle>Automatically add home screen widgets</MListItemSubtitle>
                            </MListItemContent>
                        </MListItem>
                    </MList>
                </MCardText>

                <div style="flex: 1 1 auto;"></div>
            </MCard>
        </MDialog>

        <MDialog @bind-Value="dialog2"
                 MaxWidth="500">
            <MCard>
                <MCardTitle>
                    Dialog 2
                </MCardTitle>
                <MCardText>
                    <MButton Color="primary"
                             OnClick="() => dialog3 = !dialog3">
                        Open Dialog 3
                    </MButton>
                    <MSelect Items="_items"
                             TItem="string"
                             TItemValue="string"
                             TValue="string"
                             Label="Age*"
                             ItemValue="r => r"
                             ItemText="r => r">
                    </MSelect>
                </MCardText>
                <MCardActions>
                    <MButton Color="primary"
                             Text
                             OnClick="() => dialog2 = false">
                        Close
                    </MButton>
                </MCardActions>
            </MCard>
        </MDialog>


        <MDialog @bind-Value="dialog3"
                 MaxWidth="500">
            <MCard>
                <MCardTitle>
                    <span>Dialog 3</span>
                    <MSpacer></MSpacer>
                    <MMenu Bottom
                           Left>
                        <ActivatorContent>
                            <MButton Icon @attributes="@context.Attrs">
                                <MIcon>mdi-dots-vertical</MIcon>
                            </MButton>
                        </ActivatorContent>
                        <ChildContent>
                            <MList>
                                @foreach (var item in items)
                                {
                                    <MListItem OnClick="() => { }">
                                        <MListItemTitle>@item</MListItemTitle>
                                    </MListItem>
                                }
                            </MList>
                        </ChildContent>
                    </MMenu>
                </MCardTitle>
                <MCardActions>
                    <MButton Color="primary"
                             Text
                             OnClick="() => dialog3 = false">
                        Close
                    </MButton>
                </MCardActions>
            </MCard>
        </MDialog>
    </MRow>
</div>

@code {
    bool dialog = false;
    bool dialog2 = false;
    bool dialog3 = false;
    bool notifications = false;
    bool sound = true;
    bool widgets = false;

    List<string> _items = new() { "0-17", "18-29", "30-54", "54+" };
    List<string> items = new() { "Click Me", "Click Me", "Click Me", "Click Me" };
}